<template>
  <div class="zd">
    <div class="zdtp zdtop-header"></div>
    <div class="zdtop">
      <div class="yqtitle">
        <div class="yqleft">
          <img src="../../static/images/organize_team/yqhy.png" />
          <span>邀请微信好友一起点餐！</span>
        </div>
        <div class="yqright">
          <img src="../../static/images/organize_team/zdadd.png" @click="share_firend" />
        </div>
      </div>
      <div class="zdtj">
        <div>
          <span style="color:#999;padding-right:0.2rem">当前类型</span>
          <span style="font-size:0.38rem;color:#55D8FF">{{order_detail.order_type}}制</span>
        </div>
        <div>
          <span style="color:#999;padding-right:0.2rem">当前人数</span>
          <span style="font-size:0.38rem;color:#55D8FF">{{people_count}}人</span>
        </div>
      </div>
    </div>
    <user-detail
      :business_id="order_detail.business_id"
      :menudata="item"
      v-for="(item,index) in order_detail.accounts"
      :key="index"
    ></user-detail>
    <!-- <user-detail></user-detail>
    <user-detail></user-detail>-->
    <div class="bottomjs">
      <div class="dysl">
        <span>已有{{people_count}}名队友加入组队</span>
      </div>
      <div class="bottjs">
        <div class="jsinfo">
          <span style="padding-right:0.3rem;">共:{{total_num}}件</span>
          <span>合计:</span>
          <span style="color:red;font-size:0.33rem">￥{{order_detail.total_price}}</span>
        </div>
        <div class="zfbtn">
          <yd-button size="large" type="primary" shape="circle" @click.native="submit_order">提交订单</yd-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import userDetail from "@/components/peopleteam/user_detail";
import wxapi from "@/toolset/wxapi";
export default {
  name: "listteam",
  data() {
    return {
      people_count: 0,
      set_interval: null,
      order_detail: {
        order_id: 0,
        goods_num: 0,
        total_price: 0,
        order_type: "",
        account_count: 1,
        business_id: 1,
        business_name: "",
        order_status: "",
        accounts: []
      },
      is_invitation: false,
      total_num: 0,
	  url: 'https://share.menglaide.com/#/team_detail',
	  
    };
  },
  components: {
    userDetail
  },
  computed: {
	...mapGetters(["organize_type", "order_id"]),
	/*
	* 组队类型
	* 作者：gzt
	* 时间：2019-12-06 09:09:44
	*/
    organize_team() {
      return this.organize_type == "AA" ? "AA" : "庄家";
	},
	/*
	* 本地地址
	* 作者：gzt
	* 时间：2019-12-06 09:09:51
	*/
    location_url() {
      return this.url;
      // return this.url[0]+this.url[1].substring(1,this.url[1].length)
    }
  },
  mounted() {
    this.is_invitation = this.$route.query.is_invitation;
    if (this.is_invitation) {
      this.$store.commit("ORDER_ID", this.$route.query.order_id);
    }
    // 1.好友进入该页面,先查询该订单的状态，如果该订单已经支付完成，则弹出订单已失效或已完成
    // 查询订单的详细信息
    if (this.order_id != 0) {
      this.get_order_detail();
      //每5秒调用一次
      this.set_interval = setInterval(() => {
        this.get_order_detail();
      }, 10000);
    } else {
      this.order_detail.order_type = this.organize_type;
    }

    // 测试微信分享接口
	wxapi.wx_register(this.wx_register_callback,this.location_url);


  },
  methods: {
    /*
     * 获取订单的详情信息
     * 包含 订单的基本信息，订单下拥有的用户，每个用户点的菜品
     * 此方法用户每次5s获取一次信息
     * 作者：gzt
     * 时间：2019-11-24 20:54:15
     */
    get_order_detail() {
      let _this = this;
      this.$post(this.$api.organizeteam.organize_order_detail, {
        order_id: this.order_id
      }).then(res => {
        if (res.success) {
          _this.order_detail = { ...res.data };
          _this.people_count = _this.order_detail.accounts.length;
          for (let item of _this.order_detail.accounts) {
            _this.total_num += item.total_num;
          }
          if (_this.order_detail.order_status == "已下单") {
            if (_this.is_invitation) {
              //调用是否加入
              _this.join_team();
            }
          } else {
            //如果是待支付，并且订单是  aa 则跳转至确认支付页面
            if (
              _this.order_detail.order_status == "待支付" &&
              _this.order_detail.order_type != "做东"
            ) {
              // 跳转我的订单中待支付的页面
              _this.$router.push({
                name: "payment",
                params: {
                  order_id: _this.order_id
                }
              });
            } else {
              this.$store.commit("ORDER_ID", 0);
              // 如果订单不是待支付，则跳转至首页
              _this.$router.push("home");
            }
          }
        }
      });
    },
    /*
     * 邀请朋友
     * 作者：gzt
     * 时间：2019-11-25 21:12:03
     */
    share_firend() {
      console.log(11);
      //1. 判断是否存在订单，不存在则创建订单，存在则直接分享朋友
      if (this.order_id == 0) {
        //2. 创建订单，并保存用户的数据
        this.create_order();
      } else {
        //5. 弹框邀请用户
        this.dialog_invitation();
      }
    },

    /*
     * 弹框邀请朋友
     * 作者：gzt
     * 时间：2019-11-25 21:15:36
     */
    dialog_invitation() {
      alert("邀请用户");
    },

    /*
     * 创建订单
     * 作者：gzt
     * 时间：2019-12-02 20:21:59
     */
    create_order() {
      let _this = this;
      this.$post(this.$api.organizeteam.create_order, {
        order: {
          isAa: this.order_type == "AA" ? 1 : 0,
          bussinesId: 1,
          orderId: this.order_id,
          userId: 28
        }
      }).then(res => {
        if (res.success) {
          // 3 将订单id进行保存
          this.$store.commit("ORDER_ID", res.data.orderId);
          //4. 弹框邀请用户
          this.dialog_invitation();
        }
      });
    },

    /*
     * 是否加入组队
     * 作者：gzt
     * 时间：2019-12-02 19:52:27
     */
    join_team() {
      let _this = this;
      this.$dialog.confirm({
        title: "队长的房间",
        mes: "您的好友已邀请您一起用餐,请加入他们吧！",
        opts: [
          {
            txt: "残忍拒绝",
            color: false,
            callback: () => {
              this.$dialog.loading.open("您已退出房间");
              this.$store.commit("ORDER_ID", 0);
              setTimeout(() => {
                this.$dialog.loading.close();
                this.$router.push("home"); //选择拒绝退出到首页
              }, 1000);
            }
          },
          {
            txt: "接受加入",
            color: true,
            callback: () => {
              this.$dialog.toast({
                mes: "现在你们可以一起点餐啦！",
                timeout: 1000
              });
              // 保存是邀请加入的状态
              this.$store.commit("IS_INVITATION", true);
              _this.is_invitation = false;
            }
          }
        ]
      });
    },

    /*
     * 提交订单
     * 作者：gzt
     * 时间：2019-12-03 10:39:45
     */
    submit_order() {
      let _this = this;
      this.$post(this.$api.organizeteam.submit_order, {
        orderId: this.order_id
      }).then(res => {
        if (res.success) {
          _this.$router.push({
            name: "payment",
            params: { order_id: _this.order_id }
          });
        }
      });
    },

    /*
     * 测试微信分享的接口
     * 作者：gzt
     * 时间：2019-11-30 19:39:27
     */
    wx_register_callback() {
      this.wx_share_timeline();
      this.wx_share_app_message();
    },

    /*
     * 分享到微信朋友圈
     * 作者：gzt
     * 时间：2019-12-04 09:05:16
     */
    wx_share_timeline() {
      let option = {
        title: "组队消费乐翻天",
        // link: URIEnconding(this.location_url),
        link: this.location_url+'%0fis_invitation=true%26order_id'+this.order_id,
        imgUrl:'https://api.menglaide.com/static/images/zy2.png',
        success: () => {
          alert("分享成功");
        },
        error: () => {
          alert("已取消分享");
        }
      };
      // 调用微信中的分享方法
      wxapi.share_timeline(option);
    },

    /*
     * 分享给好友
     * 作者：gzt
     * 时间：2019-12-04 09:05:45
     */
    wx_share_app_message() {
		// alert(this.location_url)
      let option = {
        title: "组队消费乐翻天",
        desc: "限时团购周 挑战最低价",
        // link: URIEnconding(this.location_url),
        link: 'https://share.menglaide.com/team_detail?is_invitation=true&order_id'+this.order_id,
        imgUrl: 'https://api.menglaide.com/static/images/zy2.png',
        success: () => {
          alert("分享成功");
        },
        error: () => {
          alert("已取消分享");
        }
      };
      // 调动微信中的分享方法
      wxapi.share_app_message(option);
    }
  },

  destroyed() {
    clearInterval(this.set_interval);
  }
};
</script>
<style lang="less">
/* 头部 */
.zd {
  padding-bottom: 2rem;
}

.yqtitle {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.35rem;
  padding-bottom: 0.2rem;
}
.yqleft {
  display: flex;
  flex: 1;
  align-items: center;
  font-size: 0.3rem;
}
.yqleft img {
  height: 0.45rem;
  padding-right: 0.2rem;
}
.yqright {
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.yqright img {
  height: 0.5rem;
}
.zdtj {
  text-align: left;
  margin-top: 0.1rem;
  display: flex;
  padding: 0.1rem 0.65rem;
  justify-content: space-between;
}

.zdtop {
  padding: 0.3rem;
  margin-bottom: 0.3rem;
  background: url("../../static/images/organize_team/zdbj.png");
  position: relative;
  top: -1.2rem;
  margin: 0.3rem;
  background-size: 100% 100%;
  height: 2.5rem;
}
.zdtop-header {
  background: #fff;
  background-image: linear-gradient(to right, #55d8ff, #2b8afe);
  height: 2rem;
}

/* 底部支付 */
.bottomjs {
  background: #fff;
  padding-top: 0.2rem;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  left: 0;
}
.dysl {
  background: antiquewhite;
}
.bottjs {
  border-top: 1px solid #f5f5f5;
  display: flex;
  height: 1.4rem;
  padding: 0.2rem;
}
.jsinfo {
  flex: 1;
  display: flex;
  padding-top: 0.2rem;
  font-size: 0.32rem;
  font-weight: bold;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.3rem;
}
.zfbtn {
  width: 2rem;
  height: 0.5rem;
}
.yd-btn-block {
  height: 0.8rem;
}
</style>
